<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
	<title>TAB切换</title>
	<link href="../css/tab.css" rel="stylesheet">
	<style type="text/css">
		.div_bg ul li{
			margin-right: 10px;
			width: 37px;
		}
		.div_bg .book1over{
			background-image: url(../images/menu1.gif);
			background-repeat: no-repeat;
			font-size:12px;
    		color:#000;
   	 		padding-top:2px;
    		cursor:pointer;
		}
		.div_bg .book1out{
			background-color: none;		
		}
		
		.div_bg .book2over{
			background-image: url(../images/menu2.gif);
			background-repeat: no-repeat;
			font-size:12px;
    		color:#000;
   	 		padding-top:2px;
    		cursor:pointer;
		}
		.div_bg .book2out{
			background-color: none;			
		}
		#book1{
			display: block;
		}
		#book2{
			display: none;
		}
		#book3{
			display: none;
		}
		ul li{
			font-size: 12px;
			color: black;
			text-align: center;
		}
	</style>
</head>

<body>
<div class="div_bg">
	<ul>
		<li id="bg1"><a class="white" onmouseover="show1()" onmouseout="look1()">小说</a></li>
		<li id="bg2"><a class="white" onmouseover="show2()" onmouseout="look2()">非小说</a></li>
		<li id="bg3" ><a class="white" onmouseover="show3()" onmouseout="look3()">少儿</a></li>
	</ul>
	<div id="book1" >
		<a  href="#" target=_blank>1.时间旅行者的妻子</a><br>
		<a   href="#" target=_blank>2.女心理师（下）</a><br>
		<a   href="#" target=_blank>3.鬼吹灯之精绝古城</a><br>
		<a   href="#" target=_blank>4.女心理师（上）</a><br>
		<a   href="#" target=_blank>5.小时候</a><br>
		<a   href="#" target=_blank>6.追风筝的人</a><br>
		<a   href="#" target=_blank>7.盗墓笔记2</a><br>
		<a   href="#" target=_blank>8.输赢</a>
	</div>
	<div id="book2" >
		<a   href="#" target=_blank>1.人生若只如初见</a><br>
		<a   href="#" target=_blank>2.高效能人士的七个..</a><br>
		<a   href="#" target=_blank>3.求医不如求己</a><br>
		<a   href="#" target=_blank>4.人体使用手册</a><br>
		<a   href="#" target=_blank>5.孩子，把你的手给我</a><br>
		<a   href="#" target=_blank>6.别笑！我是英文单词书</a><br>
		<a   href="#" target=_blank>7.人体经络使用手册</a><br>
		<a   href="#" target=_blank>8.股市稳赚</a>
	</div>
	<div id="book3">
		<a   href="#" target=_blank>1.斯凯瑞金色童书・..</a><br>
		<a   href="#" target=_blank>2.哈利・波特与“混..</a><br>
		<a   href="#" target=_blank>3.不一样的卡梅拉（..</a><br>
		<a   href="#" target=_blank>4.它们是怎么来的</a><br>
		<a   href="#" target=_blank>5.五・三班的坏小子..</a><br>
		<a   href="#" target=_blank>6.男生日记</a><br>
		<a   href="#" target=_blank>7.哈利・波特与魔法石</a><br>
		<a   href="#" target=_blank>8.噼里啪啦丛书(全7册)</a>
	</div>
</div>
</body>
<script>
	var book1=document.getElementById("book1");
	var book2=document.getElementById("book2");
	var book3=document.getElementById("book3");

	function show1(){
		book2.style.display="none";
		book3.style.display="none";
		book1.style.display="block";
		document.getElementById("bg1").className="book1over";
	}
	function look1(){
		document.getElementById("bg1").className="book1out";
	}
	function show2(){
		book1.style.display="none";
		book3.style.display="none";
		book2.style.display="block";
		document.getElementById("bg2").className="book2over";
	}
	function look2(){
		document.getElementById("bg2").className="book2out";
	}
	function show3(){
		book1.style.display="none";
		book2.style.display="none";
		book3.style.display="block";
		document.getElementById("bg3").className="book1over";
	}
	function look3(){
		document.getElementById("bg3").className="book1out";
	}
</script>
</html>
